﻿@model List<FTBS.Models.Entities.Film>
<style>
    .lableN {
        font-size: 17px;
        text-align: center;
        background-color: rgb(99, 82, 77);
        border-radius: 3px;
        color: white;
        display: inline-block;
        padding: 1px 2px 1px 2px;
    }

    .filmkind {
        padding: 5px;
        font-size: 27px;
        background-color: rgb(83, 141, 160);
        color: white;
    }
</style>
@if (Model.Count > 0)
{
    <div class="panel" style="display: block; float: left; background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%">
        <div class="container">
            <div class="filmkind">
                Phim thuộc thể loại bạn hay xem
            </div>
            <hr style="margin-top: 3px; background-color: #ddd; height: 2px;" />

            <div style="display: block;">
                @if (Model.Count > 0 && Model.Count <= 3)
                {
                    <div style="margin: 0 auto">
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            <!-- Phim đầu tiên -->
                            <div style="display: inline-block; width: 30%">
                                <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                    <a href="/Home/Detail/@Model[i].FilmId">
                                        <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[i].CategoryId)" />
                                        @if (@Model[i].IMDb > 7)
                                        {
                                            <div style="position: absolute; top: 1px; right: 1px;">
                                                <img src="~/Image/Icon/tag-blockbuster.png" />
                                            </div>
                                        }
                                    </a>
                                    <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                        <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                        <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                    </div>
                                </div>

                                <div>
                                    <strong class="limitName" style="font-size: 20px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[i].Name</strong>
                                    <div style="font-size: 17px; margin-left: 3px; width: 80px; background-color: rgb(231, 184, 101); padding: 2px; border-radius: 2px; display: inline-block">IMdb: @Model[i].IMDb</div>
                                    <div class="lableN">@Model[i].Format.FormatName</div>
                                    <div class="lableN">@Model[i].Category.CategoryName</div>
                                </div>
                            </div>
                        }
                    </div>
                }
                else
                {
                    <!-- Phim đầu tiên -->
                    <div style="display: inline-block; width: 25%">
                        <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                            <a href="/Home/Detail/@Model[0].FilmId">
                                <img src="~/Image/FilmImage/@Model[0].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[0].CategoryId)" />
                                @if (@Model[0].IMDb > 7)
                                {
                                    <div style="position: absolute; top: 1px; right: 1px;">
                                        <img src="~/Image/Icon/tag-blockbuster.png" />
                                    </div>
                                }
                            </a>
                            <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[0].TrailerURL','@Model[0].Name')">Trailer</button>
                                <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                            </div>
                        </div>

                        <div>
                            <strong class="limitName" style="font-size: 20px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[0].Name</strong>
                            <div style="font-size: 17px; margin-left: 3px; width: 80px; background-color: rgb(231, 184, 101); padding: 2px; border-radius: 2px; display: inline-block">IMdb: @Model[0].IMDb</div>
                            <div class="lableN">@Model[0].Format.FormatName</div>

                        </div>
                    </div>
                    <div style="display: inline-block; width: 74%; vertical-align: top">
                        @if (Model.Count >= 4)
                        {
                            for (int i = 1; i < Model.Count; i++)
                            {
                            <div style="display: inline-block; width: 30%; margin-left: 2%; margin-top: 0px">
                                <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                    <a href="/Home/Detail/@Model[i].FilmId">
                                        <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:200px" onclick="countCategoryView(@Model[i].CategoryId)" />
                                        @if (@Model[i].IMDb > 7)
                                        {
                                            <div style="position: absolute; top: 1px; right: 1px;">
                                                <img src="~/Image/Icon/tag-blockbuster.png" />
                                            </div>
                                        }
                                    </a>
                                    <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                        <button class="small success" style="width: 40%; font-size: 16px; padding: 3px"  onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                        <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                    </div>
                                </div>
                                <div style="display: block; width: 100%; margin: 5px">

                                    <strong class="limitName" style="font-size: 15px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left;">@Model[i].Name</strong>

                                    <div style="font-size: 17px; margin: 0px 12px 0px 0px; width: 80px; background-color: rgb(231, 184, 101); padding: 2px; border-radius: 2px; display: inline-block">IMDb: @Model[i].IMDb</div>
                                    <div class="lableN" style="vertical-align: top">@Model[i].Format.FormatName</div>
                                </div>
                            </div>                              
                            }
                        }
                    </div>
               
                }
            </div>
        </div>
    </div>
}

<script>
    function ChangeView() {
        window.location.href = "/Schedule/Schedule";
    }
</script>

